<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>
  <div id="app">
    <tom></tom>
    <jerry></jerry>
  </div>
</body>
<script>
//学习混入
//用途:给组件统一添加数据/钩子函数/方法
//特征:
//  Vue.mixin方法(全局)/mixins属性(局部)传对象,对象当中有data,钩子函数,methods
//注意:
//   (1)如果数据/方法存在冲突采用就近原则;钩子函数如果存在冲突都执行
//   (2)可以混入多个内容,并且后面覆盖前面,但是别混入太多,非常混乱
Vue.mixin({
  data(){
    return {
      username: 'zs'
    }
  },
  created(){
    console.log(123)
  },
  methods: {
    say(){
      console.log('hello')
    }
  }
})
Vue.component('tom',{
  data() {
    return {
      username: 'ls'
    }
  },
  created(){
    console.log(456)
  },
  template: `
    <div>子组件1-{{username}}-<button @click="say">按钮</button></div>
  `
})
let obj = {
  data(){
    return {
      username: 'w5'
    }
  }
}
Vue.component('jerry',{
  mixins: [obj],
  template: `
    <div>子组件2-{{username}}-<button @click="say">按钮</button></div>
  `
})
new Vue({
  el: '#app'
})
</script>
</html>
